<template>
  <view class="valueCardBind">
    <view class="cn"><input v-model="bindCardNo" class="cardno paramInput" type="number" placeholder="请输入储值卡号码"></view>

    <view class="ps"><input v-model="bindCardPassword" class="pass paramInput" password type="number" placeholder="请输入储值卡密码"></view>

    <button class="page-body-button" type="warn" @tap="bindcard">立即绑定</button>
    <view class="instruction">
      <view class="explain">绑卡说明</view>
      <view><text>请输入卡号，刮开卡面密码，输入密码进行绑定。详情咨询商家。</text></view>
    </view>
  </view>
</template>
<script>
import { cardBind } from '@/api/api1'

export default {
  components: {},
  data() {
    return {
      bindCardNo: null,
      bindCardPassword: null
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  onLoad() {
  },
  onReachBottom() {
  },

  methods: {
    bindcard: function() {
      if (!this.bindCardNo) {
        uni.$u.toast('请填写卡号码')
        return
      }
      if (!this.bindCardPassword) {
        uni.$u.toast('请填写卡密码')
        return
      }
      uni.showLoading({
        title: '绑定储值卡...'
      })
      cardBind({
        bindCardNo: this.bindCardNo,
        bindCardPassword: this.bindCardPassword
      }).then(res => {
        uni.hideLoading()
        console.log('储值卡绑定：', res)

        uni.showModal({
          title: '成功',
          content: res.data.message,
          success: function(res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1
              })
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.valueCardBind {
  min-height: 100%;
  flex: 1;
  font-size: 32rpx;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  overflow: hidden;
}
.cn {
  background-color: #ffffff;
}
.cardno {
  padding-left: 28rpx;
  border-top: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  height: 100rpx;
  letter-spacing: 4rpx;
}
.ps {
  background-color: #ffffff;
}
.pass {
  width: 90%;
  margin-left: 28rpx;
  height: 100rpx;
  border-top: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  letter-spacing: 4rpx;
}
.page-body-button {
  margin-top: 60rpx;
  margin-bottom: 60rpx;
  border-radius: 40rpx;
}
.instruction {
  padding: 0 40rpx;
}
.instruction .explain {
  font-size: 32rpx;
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  letter-spacing: 2rpx;
}
.instruction text {
  opacity: 0.5;
  font-size: 22rpx;
  font-family: Courier, Calibri, '黑体';
  font-weight: 500;
  text-align: left;
  color: #000000;
}
</style>
